<!doctype html>
<head>
    <title>Threebox Basic Example</title>
    <script src="../dist/threebox.js" type="text/javascript"></script>
    <script src="config.js"></script>

    <script src='https://api.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body, html { 
            width: 100%;
            height: 100%;
            margin: 0;
        }
        #map { 
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id='map' class='map'></div>

    <script>
    if(!config) console.error("Config not set! Make a copy of 'config_template.js', add in your access token, and save the file as 'config.js'.");
    
    mapboxgl.accessToken = config.accessToken;
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [-122.4131, 37.7743],
      zoom: 15.95,
      pitch: 60,
      heading: 41,
      hash: true
    });

    map.on("load", function() {
        // Initialize threebox
        window.threebox = new Threebox(map);
        threebox.setupDefaultLights();


        // Load and manipulate a THREE.js scenegraph as you would normally
        loader = new THREE.JSONLoader();

        loader.load("models/boeing747-400-jw.json", function(geometry) {
            geometry.rotateY((90/360)*2*Math.PI);
            geometry.rotateX((90/360)*2*Math.PI);

            var material = new THREE.MeshPhongMaterial( {color: 0xaaaaff, side: THREE.DoubleSide}); 
            aircraft = new THREE.Mesh( geometry, material );
            var planePosition = [-122.41356, 37.77577 ,100];

            // Add the model to the threebox scenegraph at a specific geographic coordinate
            threebox.addAtCoordinate(aircraft, planePosition, {scaleToLatitude: true, preScale: 2});
        });

    });


    </script>
</body>